<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.org/ui">

    <f:view contentType="text/html">
        <h:head>
            <f:facet name="first">
                <meta http-equiv="X-UA-Compatible" content="EmulateIE8" />
                <meta content='text/html; charset=UTF-8' http-equiv="Content-Type"/>
                <title>PrimeFaces - ShowCase</title>
            </f:facet>

            <link type="text/css" rel="stylesheet" href="#{request.contextPath}/css/default.css" />
            <link type="text/css" rel="stylesheet" href="#{request.contextPath}/css/syntaxhighlighter/syntaxhighlighter.css" />
        </h:head>

        <h:body>

            <p:growl id="msg" showDetail="true"/>

            <p:layout fullPage="true">

                <p:ajax event="toggle" listener="#{layoutBean.handleToggle}" update="msg" />
                <p:ajax event="close" listener="#{layoutBean.handleClose}" update="msg" />

                <p:layoutUnit position="north" size="100" header="Top" resizable="true" closable="true" collapsible="true">
                    <h:outputText value="North unit content." />
                </p:layoutUnit>

                <p:layoutUnit position="south" size="100" header="Bottom" resizable="true" closable="true" collapsible="true">
                    <h:outputText value="South unit content." />
                </p:layoutUnit>

                <p:layoutUnit position="west" size="200" header="Left" resizable="true" closable="true" collapsible="true">
                    <h:outputText value="West unit content." />
                </p:layoutUnit>

                <p:layoutUnit position="east" size="200" header="Right" resizable="true" closable="true" collapsible="true">
                    <h:outputText value="Right unit content." />
                </p:layoutUnit>

                <p:layoutUnit position="center">
                    Layout responds to toggle, close and resize events by invoking server side listeners.

                    <p:tabView style="margin-top:10px">
                        <p:tab title="layoutElement.xhtml">
                            <pre name="code" class="xml">
&lt;p:layout fullPage="true"&gt;

    &lt;p:ajax event="toggle" listener="\#{layoutBean.handleToggle}" update="msg" /&gt;
    &lt;p:ajax event="close" listener="\#{layoutBean.handleClose}" update="msg" /&gt;

    &lt;p:layoutUnit position="north" size="100" header="Top" resizable="true" closable="true" collapsible="true"&gt;
        &lt;h:outputText value="North unit content." /&gt;
    &lt;/p:layoutUnit&gt;

    &lt;p:layoutUnit position="south" size="100" header="Bottom" resizable="true" closable="true" collapsible="true"&gt;
        &lt;h:outputText value="South unit content." /&gt;
    &lt;/p:layoutUnit&gt;

    &lt;p:layoutUnit position="west" size="200" header="Left" resizable="true" closable="true" collapsible="true"&gt;
        &lt;h:outputText value="West unit content." /&gt;
    &lt;/p:layoutUnit&gt;

    &lt;p:layoutUnit position="east" size="200" header="Right" resizable="true" closable="true" collapsible="true"&gt;
        &lt;h:outputText value="Right unit content." /&gt;
    &lt;/p:layoutUnit&gt;

    &lt;p:layoutUnit position="center"&gt;
        //content
    &lt;/p:layoutUnit&gt;

&lt;/p:layout&gt;
                            </pre>
                        </p:tab>

                        <p:tab title="LayoutBean.java">
                            <pre name="code" class="java">
package org.primefaces.examples.view;

import javax.faces.application.FacesMessage;
import javax.faces.context.FacesContext;
import org.primefaces.component.layout.LayoutUnit;

import org.primefaces.event.CloseEvent;
import org.primefaces.event.ToggleEvent;

public class LayoutBean {

	public void handleClose(CloseEvent event) {
		FacesMessage message = new FacesMessage(FacesMessage.SEVERITY_INFO, "Unit Closed", "Position:'" + ((LayoutUnit)event.getComponent()).getPosition() + "'");

		addMessage(message);
	}

	public void handleToggle(ToggleEvent event) {
		FacesMessage message = new FacesMessage(FacesMessage.SEVERITY_INFO, ((LayoutUnit)event.getComponent()).getPosition() + " toggled", "Status:" + event.getVisibility().name());

		addMessage(message);
	}
	
	private void addMessage(FacesMessage message) {
		FacesContext.getCurrentInstance().addMessage(null, message);
	}
}
                            </pre>
                        </p:tab>
                    </p:tabView>
                </p:layoutUnit>

            </p:layout>

        </h:body>

    </f:view>
    
    <script language="javascript" src="#{request.contextPath}/syntaxhighlighter/scripts/sh.js"></script>
    <script language="javascript">
        dp.SyntaxHighlighter.ClipboardSwf = '#{request.contextPath}/syntaxhighlighter/scripts/clipboard.swf';
        dp.SyntaxHighlighter.HighlightAll('code');
    </script>
</html>